<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
</head>
<body>


<div id="showStuBar" style="width:600px;height:400px;"></div>
<script type="text/javascript">
layui.use("laydate",function(){
	var laydate = layui.laydate;
	laydate.render({
		elem:"#date"
	})
})
//初始化echarts实例
var myChart = echarts.init(document.getElementById('showStuBar'));        
//设置图标配置项
myChart.setOption({
    title:{
        text:'学生借书还书图表'
    },
    tooltip:{},
    legend:{
        data:['借书','还书']
    },
    xAxis:{
        data:[]
    },
    yAxis:{
    	
    },
    series:[
        {
            name:'借书',
            type:'bar',
            data:[]
        },{
            name:'还书',
            type:'bar',
            data:[]
        }
    ]
})

//异步请求动态参数

$.ajax({
	url:"/queryBar",
	data:{
		
	},
	dataType:"json",
	type:"post",
	success:function(res){
		//res代表返回值
		myChart.setOption({                
            xAxis:{
                data:res.name
            },
            series:[
                {    
                    //根据名字对应到相应的系列
                    name:"借书",
                    data:res.borrow
                },{    
                    //根据名字对应到相应的系列
                    name:"还书",
                    data:res.given
                }
            ]
        })
	}
})

</script>
</body>
</html>